
<!--
依赖 van Field ActionSheet
@/utils/utils formatDate
使用：
<mx-action-sheet
  label="证件类型"
  placeholder="请选择证件类型"
  :holderDisabled="holderDisabled"
  :cardType="cardType"
  v-model="policyholder.idType"
/>
************
子父组件之间的信息传递
父->子
子组件props中接收的值，赋给新创建的data，并将该data设置双向绑定
watchEffect捕获props值的变化并且重新赋值

子到父
父组件事件绑定@idTypeValueFun="idTypeValueFun"
子组件声明emits: ["idTypeValueFun"],
向父组件传值：ctx.emit("idTypeValueFun",item.value)

能否直接使用props的值而不用再次绑定data？
可以，但是props中的值只能读，不能重新赋值

属性传值 
父：policyholderData="policyholderData"
子：ctx.emit("policyholderData",state.policyholder)
注：一级父和子可以指传值  二级父和子则传值失败

v-model
父组件：v-model="policyholder.idType"
子组件props:
modelValue:{
  type:String,
  default:""
},
emits: ["update:modelValue"],
向父组件传值
ctx.emit("update:modelValue",item.value)
************
-->
<template>
  <div v-show="show">
    <van-field :label="label" readonly :disabled="holderDisabled" clickable is-link v-model="compuCardType" @focus="showCardType=true" :placeholder="placeholder" />
    <van-action-sheet v-model:show="showCardType" close-on-click-action :actions="cardType" @select="onSelect"/>
  </div>
</template>
<script lang="ts">

import { watch,watchEffect,defineComponent,reactive,toRefs,computed } from 'vue';
import { useStore } from 'vuex'

export default defineComponent({
  name:"ActionSheet",
  props:{
    show:{
      type:Boolean,
      default:true
    },
    modelValue:{
      type:String,
      default:""
    },
    label:{
      type:String,
      default:""
    },
    placeholder:{
      type:String,
      default:""
    },
    holderDisabled:{
      type:Boolean,
      default:false
    },
    cardType:{
      type:[Object],
      default:[{
        dataCode: "",
        name: "",
        value: ""
      }]
    }
  },
  emits: ["update:modelValue"],
  setup(props, ctx){
    interface CardType{
      dataCode: string;
      name: string;
      value: string;
    }
    interface Item{
      name: string;
      value: string;
    }
    const store = useStore()
    
    // 数据双向绑定
    const state=reactive({
      showCardType:false,
      idType:props.modelValue,
      cardType:props.cardType
    })
    
    watchEffect(()=>{
      state.idType=props.modelValue
      state.cardType=props.cardType
    })
    
    const methodsFun=reactive({
      onSelect:(item: Item)=>{
        state.idType=item.value
        ctx.emit("update:modelValue",item.value)
      },
      compuCardType:computed(()=>{
        const _idType=state.idType;
        const _cardType=state.cardType;
        let _text=""
        if(_idType && _cardType){
          
          _cardType.some((item)=>{
            if(_idType==item.value){
              _text=item.name;
              return true;
            }
          })
        }
        return _text
      }),
    })
    return {
      ...toRefs(state),

      ...toRefs(methodsFun)
    }
  }
})
</script>